<template>
  <div class="steps-main" :class="{ 'steps-main-vertical': direction === 'vertical' }">
    <div
      class="step-item-layout"
      :class="{ finish: itemStatus[index] }"
      v-for="(item, index) in items"
      :key="item.key"
    >
      <div class="step-line" ref="linRefs"></div>
      <div class="step-item">
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
export interface StepsOption {
  title: string
  key: string
}

interface Props {
  items: Array<StepsOption>
  current?: string | number
  direction?: 'horizontal' | 'vertical'
}

const props = withDefaults(defineProps<Props>(), {
  items: () => [],
  direction: 'horizontal'
})

const itemStatus = ref<Array<Boolean>>(Array(props.items.length).fill(false))

const linRefs = ref()

onMounted(() => {
  const firstLine = linRefs.value.shift()
  firstLine.style.display = 'none'
  update()
})

const update = () => {
  itemStatus.value = Array(props.items.length).fill(false)

  for (const [index, item] of props.items.entries()) {
    itemStatus.value[index] = true
    if (item.key === props.current) break
  }
}

watch(() => props.current, update)
</script>

<style scoped lang="scss">
.steps-main {
  display: flex;
  align-items: center;
  margin: 0 40px;
  .step-item-layout {
    display: flex;
    align-items: center;
    .step-item {
      background-color: transparent;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      transition: 0.3s all;

      p {
        position: absolute;
        font-size: 14px;
        color: #2c2d30;
        line-height: 18px;
        top: 14px;
        text-align: center;
        min-width: 160px;
      }

      &::before {
        content: '';
        height: 8px;
        width: 8px;
        background-color: #d9d9d9;
        border-radius: 50%;
      }
    }

    .step-line {
      width: 160px;
      height: 1px;
      background-color: #d9d9d9;
    }
  }

  .finish {
    .step-item {
      background-color: $main-color;

      &::before {
        background-color: #ffff;
      }
    }

    .step-line {
      background-color: $main-color;
    }
  }
}

.steps-main-vertical {
  flex-direction: column;

  .step-item-layout {
    flex-direction: column;

    .step-item {
      p {
        top: initial;
        left: 36px;
        text-align: left;
      }
    }

    .step-line {
      height: 160px;
      width: 1px;
    }
  }
}
</style>
